<template>
  <div class="map-box">
    <div id="map"></div>
    <div>
      <button id="initCar1">初始化小车1</button>
      <button id="removeCar1">删除小车1</button>
      <button id="initCar2">初始化小车2</button>
      <button id="removeCar2">删除小车2</button>
    </div>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
      const initCar1 = document.querySelector('#initCar1');
      const removeCar1 = document.querySelector('#removeCar1');
      const initCar2 = document.querySelector('#initCar2');
      const removeCar2 = document.querySelector('#removeCar2');
      // 类型一 自定义图标图标
      const m1 = new WMap.Marker({
        icon: 'https://webapi.amap.com/images/car.png',
        position: [104.04885959297181, 46.59148906549072]
      })
      const map = new WMap.Map('map', {
        center: [116.48538303047181, 39.99969219049072],
        zoom: 5,
        minZoom: 3,
        maxZoom: 18
      })
      map.add(m1)
      // 类型二 icon +  label 实例化
      const marker1 = new WMap.Marker({
        position: new WMap.LngLat(116.12283420234681, 43.93279765924071),
        icon: 'https://webapi.amap.com/images/car.png',
        offset: [-26, -13],
        angle: 180,
        label: {
          content: "<div class='WMap-single-box'><p>小车1</p>icon +  label 实例化 marker</div>",
          offset: [-132, -50]
        }
      })
      // 类型三 content + label 实例化
      const marker2 = new WMap.Marker({
        position: [122.14334201484681, 43.51531719049071],
        content: '<img src="https://webapi.amap.com/images/car.png" alt="" style="vertical-align:middle;">',
        offset: [-40, -40],
        label: {
          content: "<div class='WMap-single-box' style='text-align: right;'><p>小车2</p>content + label 实例化 marker</div>",
          offset: [-132, -74]
        }
      })

      initCar1.onclick = () => {
        map.add(marker1);
      }
      removeCar1.onclick = () => {
        map.remove(marker1);
      }
      initCar2.onclick = () => {
        map.add(marker2);
      }
      removeCar2.onclick = () => {
        map.remove(marker2);
      }
      
      //点击置顶
      marker1.on('click', () => {
        marker1.setTop()
      })
      //点击置顶
      marker2.on('click', () => {
        marker2.setTop()
      })
    })
  })
</script>

<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
button + button {
  margin-left: 10px;
}
</style>
